<div local-class="row {{if this.api_token.isNew "create-token"}}" data-test-api-token={{this.api_token.id}}>
  <div local-class="name" data-test-name>
    {{#if this.api_token.isNew}}
      <Input
        @type="text"
        placeholder="New token name"
        @disabled={{this.api_token.isSaving}}
        @value={{this.api_token.name}}
        @autofocus="autofocus"
        @enter={{action "saveToken"}}
        data-test-focused-input
      />
    {{else}}
      {{ this.api_token.name }}
    {{/if}}
  </div>

  <div class='spacer'></div>

  {{#unless this.api_token.isNew}}
    <div local-class='dates'>
      <div class='created-at' data-test-created-at>
        <span class='small' title={{this.api_token.created_at}}>
          Created {{moment-from-now this.api_token.created_at}}
        </span>
      </div>
      {{#if this.api_token.last_used_at}}
        <div class='last_used_at' data-test-last-used-at>
          <span class='small' title={{this.api_token.last_used_at}}>
            Last used {{moment-from-now this.api_token.last_used_at}}
          </span>
        </div>
      {{else}}
        <div class='last_used_at' data-test-last-used-at>
          <span class='small'>Never used</span>
        </div>
      {{/if}}
    </div>
  {{/unless}}

  <div local-class='actions'>
    {{#if this.api_token.isNew}}
      <button
        type="button"
        class='small yellow-button'
        disabled={{this.disableCreate}}
        title={{if this.emptyName "You must specify a name" ""}}
        data-test-save-token-button
        {{action "saveToken"}}
      >
        Create
      </button>
    {{else}}
      <button
        type="button"
        class='small tan-button'
        disabled={{this.api_token.isSaving}}
        data-test-revoke-token-button
        {{action "revokeToken"}}
      >
        Revoke
      </button>
    {{/if}}
    {{#if this.api_token.isSaving}}
      <img class='overlay' src="/assets/ajax-loader.gif" data-test-saving-spinner>
    {{/if}}
  </div>
</div>

{{#if this.serverError}}
  <div local-class="row error" data-test-error>
    <div>
      {{ this.serverError }}
    </div>
  </div>
{{/if}}

{{#if this.api_token.token}}
  <div local-class="row new-token" data-test-token>
    <div>
      Please record this token somewhere, you cannot retrieve
      its value again. For use on the command line you can save it to <code>~/.cargo/credentials</code>
      with:

      <pre>cargo login {{ this.api_token.token }}</pre>
    </div>
  </div>
{{/if}}
